<template>
    <van-sticky>
        <van-nav-bar :title="coupon.name" left-text="返回" left-arrow @click-left="onBack" />
    </van-sticky>
    <div class="coupon_detail">
        <div class="coupon_info">
            <div class="left">
                <div class="left_top">
                    <div><span>{{ Coupondata.rate * 100 }}</span>折</div>
                    <div class="top_info">
                        <div>{{ Coupondata.title }}</div>
                        <div>COUPON</div>
                    </div>
                </div>
                <div class="left_tips">订单满<span>100</span>减<span>50</span>元</div>
            </div>
            <div class="receive">
                <button class="false_btn" v-if="Coupondata.status == 0">已失效</button>
                <button class="false_btn" v-else-if="Coupondata.collection_status == true && Coupondata.status == 1">已领取</button>
                <button class="right_btn" v-else-if="Coupondata.collection_status == false && Coupondata.status == 1" @click="onclick">立即领取</button>
            </div>
        </div>
        <div class="coupon_prompt">
            <div class="prompt_title">温馨提示：</div>
            <div><span>•</span>每人限领1张</div>
            <div><span>•</span>仅限量{{ Coupondata.total }}张，赶快领取！</div>
            <div><span>•</span>领取后{{ Coupondata.createtime_date }}至{{ Coupondata.endtime_date }}有效</div>
        </div>
    </div>

<!-- 
    <van-notice-bar left-icon="volume-o" :scrollable="false">
  <van-swipe
    vertical
    class="notice-swipe"
    :autoplay="3000"
    :touchable="false"
    :show-indicators="false"
    @change="onchang"
  >
    <van-swipe-item v-for="item in list">
        <div style="display: flex; align-items: center ;width: 100%;">
                    <van-image
                        fit="cover"
                        height="30"
                        width="30"
                        :src="
                            item.avatar
                                ? item.avatar
                                : '/assets/images/qishi.jpg'
                        "
                    />
                    
                    <div style="margin-left: 1rem;">
                        {{ item.nickname || item.mobile }}
                    </div>
                    <span style="margin-left: 1rem">
                        在{{ item.createtime_date }}
                    </span>领取了该优惠卷
                </div>
    </van-swipe-item>
  </van-swipe>
</van-notice-bar> -->
<van-notice-bar left-icon="volume-o" :scrollable="false">
        <van-swipe
            vertical
            :style="{ width: tttt + 'px' }"
            class="notice-swipe"
            :autoplay="3000"
            :touchable="false"
            :show-indicators="false"
            @change="onLoad"
        >
            <van-swipe-item v-for="item in list" :key="item.id">
                <van-row justify="space-around">
                    <van-col style="display: flex; align-items: center">
                        <van-image
                            fit="cover"
                            height="30"
                            width="30"
                            :src="
                                item.avatar
                                    ? item.avatar
                                    : '/assets/images/avatar.jpg'
                            "
                        />
                    </van-col>
                    <van-col span="5">
                        {{ item.nickname || item.mobile }}
                    </van-col>
                    <van-col span="5">
                        {{ item.createtime_date }}
                    </van-col>
                </van-row>
            </van-swipe-item>
        </van-swipe>
    </van-notice-bar>


    <Tabbar />
</template>

<script setup>

const { proxy } = getCurrentInstance();

const coupon = ref({});
const business = proxy.$business;
const cid = ref(proxy.$route.query.cid ?? 0);
const page = ref(1);
const list = ref([]);
const status = ref(true)

const Coupondata = ref([]);
// useWindowSize 获取浏览器窗口的视口宽度和高度，并在窗口大小变化时自动更新
import { useWindowSize } from "@vant/use";
const { width, height } = useWindowSize(); // 使用 useWindowSize 钩子获取窗口大小
let tttt = width.value - 150


console.log("🚀 ~ file: info.vue:123 ~ width.value:", width.value + "px");

onBeforeMount(() => 
{
    getCouponInfo();
    onchang();
})


const onchang = async () => 
{
    if(status.value === false)
        {
        return false
        }
    
            let params = {
            cid: cid.value,
            page:page.value,
        }

        let result = await proxy.$http.post({
            url:'/Coupon/business',
            params
        })

        if(result.code === 1)
        {
            list.value = list.value.concat(result.data.list);
            let count = result.data.count ?? 0;
            if(list.value.length >= count)
            {
                    status.value = false
            }

            console.log("🚀 ~ list.value:", list.value)
            page.value = page.value + 1;
        }else{
            proxy.$warning(result.msg);
        }
    

    
}


const getCouponInfo = async () => 
{
    let params = {
        cid: cid.value,
        busid: business.value.id
    }
    

    let result = await proxy.$http.post({
        url: '/Coupon/info',
        params
    })


    if (result.code === 1) {
       
        Coupondata.value = result.data
      
        
    } else {
        proxy.$warning({
            message: result.msg,
            onClose: () => {
                onBack();
            }
        })
    }
}

const onclick = async () =>
{
    if(!business.value.id || Object.getOwnPropertyNames(business.value).length === 0)
    {

        proxy.$confirm({
            title:'登录',
            message:'是否跳转登录界面？'
        }).then(() => {
            proxy.$stores.redirect = {
                path:'/coupon/info',
                params:{
                    cid: cid.value,
                }
            };
            proxy.$router.push({
                path:'/business/login',
                replace:true
            })
        }).catch((err) => {});
    }else{
        let params = {
            cid: cid.value,
            busid: business.value.id
        }

        let result = await proxy.$http.post({
            url: '/Coupon/receive',
            params
        })
        if(result.code === 1){
            proxy.$showSuccessToast(result.msg)

            Coupondata.value.collection_status = true

            status.value = true;

            list.value = [];

            page.value = 1

            onchang();
        }else{
            proxy.$warning(result.msg)
        }
        

    }
}

const onBack = () => proxy.$router.back();
</script>

<style scoped>
  @import url('/assets/css/CouponInfo.css');

  .notice-swipe {
    height: 40px;
    line-height: 40px;
  }

</style>